<template>
  <div>
     <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#0080FF"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1"><i class="el-icon-menu" @click="drawer = true"></i></el-menu-item>
      <el-menu-item index="2">审批中心</el-menu-item>
      <el-submenu index="3">
        <template slot="title">我的工作台</template>
        <el-menu-item index="3-1">吃饭</el-menu-item>
        <el-menu-item index="3-2">睡觉</el-menu-item>
        <el-menu-item index="3-3">打豆豆</el-menu-item>
        <el-submenu index="3-4" class="el-submenu">
          <template slot="title">吹牛逼</template>
          <el-menu-item index="3-4-1">吹</el-menu-item>
          <el-menu-item index="3-4-2">牛</el-menu-item>
          <el-menu-item index="3-4-3">逼</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="4">消息中心</el-menu-item>
      <el-menu-item index="5">单据管理</el-menu-item>
      <!-- 头像区，登录、注销 -->
      <el-menu-item index="6" style="position: absolute; right: 0">
        <el-avatar size="medium" :src="avatarImg"></el-avatar>
        <el-dropdown placement="bottom">
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item index="6-1" icon="el-icon-loading" v-if="loginShow"><span @click="toLogin">登录</span></el-dropdown-item>
            <el-dropdown-item index="6-2" icon="el-icon-scissors" v-if="logoutShow"><span @click="logOut">注销</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>  

    </el-menu>

    <!--左侧弹出菜单-->
    <el-drawer
      class="left-nav"
      title="人事管理系统"
      :visible.sync="drawer"
      direction="ltr"
      show-close="true"
      close-on-press-escape="true"
      :with-header="true">
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 20px">
          <el-tab-pane label="员工资料" name="EmployeeInfo">
            <el-tag style="margin: 0 10px 0 0">基本资料</el-tag>
            <el-tag>高级资料</el-tag>
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 20px">
          <el-tab-pane label="统计管理" name="StatisticalManagement">
            <!-- margin属性：上 右 下 左 add by 小罗-->
            <el-tag style="margin: 0 10px 0 0">综合信息统计</el-tag>
            <el-tag style="margin: 0 10px 0 0">员工积分统计</el-tag>
            <el-tag style="margin: 0 10px 0 0">人事信息统计</el-tag>
            <el-tag>人事记录统计</el-tag>
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 20px">
          <el-tab-pane label="工资管理" name="SalaryManagement">
            <el-tag style="margin: 0 10px 0 0">账套管理</el-tag>
            <el-tag style="margin: 0 10px 0 0">账套设置</el-tag>
            <el-tag style="margin: 0 10px 0 0">工资表管理</el-tag>
            <el-tag style="margin: 0 10px 0 0">月末处理</el-tag>
            <el-tag>工资表查询</el-tag>
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 20px">
          <el-tab-pane label="系统管理" name="SystemManagement">
            <el-tag style="margin: 0 10px 0 0">基础信息设置</el-tag>
            <el-tag style="margin: 0 10px 0 0">操作日志管理</el-tag>
            <el-tag style="margin: 0 10px 0 0">备份恢复数据</el-tag>
            <el-tag style="margin: 0 10px 0 0">初始化数据库</el-tag>
            <el-tag style="margin: 10px 10px 0 0">系统管理</el-tag>
            <el-tag>操作员管理</el-tag>
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 20px">
          <el-tab-pane label="人事管理" name="HRManagement">
            <el-tag style="margin: 0 10px 0 0">员工资料</el-tag>
            <el-tag style="margin: 0 10px 0 0">员工奖惩</el-tag>
            <el-tag style="margin: 0 10px 0 0">员工培训</el-tag>
            <el-tag style="margin: 0 10px 0 0">员工好评</el-tag>
            <el-tag style="margin: 10px 10px 0 0">员工调薪</el-tag>
            <el-tag style="margin: 10px 0 0 0">员工调动</el-tag>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-drawer>

    <div>
      <transition name="el-zoom-in-center">
        <login @confirm="confirm" v-if="showLoginWindow"></login>
      </transition>
    </div>
  </div>
</template>

<script>
import Login from './Login.vue'
  export default {
    name:'Index',
    components: {
      Login
    },
    data() {
      return {
        showLoginWindow: false,
        loginShow: true,
        logoutShow: false,
        activeIndex: '1',
        activeIndex2: '1',
        drawer: false,
        avatarImg: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        activeName: "left-nav" //左侧标签栏 add by 小罗
      };
    },
    updated(){
      console.log(this);
      // console.log("this.showLoginWindow  111   " + this.showLoginWindow);
      // if(this.showLoginWindow) {
      //   this.showLoginWindow = false;
      //   console.log("this.showLoginWindow  222   " + this.showLoginWindow);
      // }
    },
    methods: {
      confirm(res){
        this.loginShow = !res;
        this.logoutShow = res;
        this.showLoginWindow = !res;
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      // 左侧标签栏点击 add by 小罗
      handleClick() {
        console.log();
      },
      toLogin: function(){
        this.showLoginWindow = true;
      },
      logOut: function(){
        this.loginShow = true;
        this.axios({
            url: '/logout',   
            method: 'post'      
        }).then(res=>{
            this.loginShow = true;
            this.logoutShow = false; 
            let username = this.$session.get("username");
            let data = res.data;
            this.$session.remove("username");
            this.$session.remove(username+"isLogin");
            this.$session.remove("role");
            this.$message({
                  message: data.message,
                  type: 'success'
                });
        }).catch(()=>{         
            this.$message.error('请求发送失败');
        })
        
      }
    }
  }
</script>

<style>
  body {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
  }
</style>